<template>
	<view class="pro-body">
	
		<view class="body" >
			<view class="op-container no-bottom-padding">
				<view class="date-row">
				    <view class="date-label">单据日期：</view>
				    <uni-datetime-picker
				      ref="datetimePicker"
				      v-model="header.fdate"
				      type="date"
				      @change="onInStockTimeChange"
				      :placeholder="'请选择日期时间'"
				      class="date-picker"
				    />
				  </view>
				<uni-list :border="false" >
					<!-- <uni-list-item :border="false" title="执行者" :rightText="userInfo.name" /> -->
					<uni-list-item :border="false" title="单据编号"  :rightText="header.billNo" />
					<uni-list-item :border="false" title="物料名称"  :rightText="header.materialName" />
					<uni-list-item :border="false" title="件号"  :rightText="header.specification" />
					<uni-list-item :border="false" title="数量"  :rightText="String(header.qty)" />
					<uni-list-item :border="false" title="工序说明"  :rightText="header.describe1" />
				<!-- 	<uni-list-item :border="false" title="日期">
					         <template v-slot:footer >
					         	<uni-datetime-picker type="line" v-model="inStockTime" @change="onInStockTimeChange"
					         		placeholder="请选择日期">
					         	</uni-datetime-picker>
					         </template>
					      </uni-list-item> -->
				</uni-list>
			</view>
			
			<template v-if="detail && detail.length > 0" >
				<uni-swipe-action-item class="" v-for="(item,index) in detail" :left-options="options" @click="handleDelete(item)" :key = "index">
					<view class="panel">
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">托盘编号：</view>
									<view class="panel_content_row_item_value">{{ item.trayno }}</view>
								</view>
						
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
				
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">物料名称：</view>
									<view class="panel_content_row_item_value">{{ item.fmaterialname }}</view>
								</view>
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">物料编码：</view>
									<view class="panel_content_row_item_value">{{ item.fmaterialnumber }}</view>
								</view>
		
							</view>
						</view>

						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">补料数量：</view>
									<view class="panel_content_row_item_value">{{ item.factualqty }}</view>
								</view>
								
							</view>
						</view>
					</view>
				</uni-swipe-action-item>	
			
			</template>
		<uni-empty-info v-else label="暂无补料信息"></uni-empty-info>
			
		</view>	
		<!--  底部按钮  -->
		<view class="footerPanel">
			<view class="footerPanel_body">
				<button @click="pickScan" class="footerBtn scan" type="primary"><i
						class="iconfont icon-saomiao btn_icon"></i>新增
				</button>
				<button @click="saveFeedBill" class="footerBtn save" ><i
						class="iconfont icon-duihao btn_icon" ></i>生成补料单
				</button>
				
			</view>
		</view>
		<!-- 获取托盘信息 -->
		<GetTray ref="trayRef" @success="getTraySuccess"></GetTray>
		<!-- 扫描托盘 -->
		<tray-popup ref="trayPopupRef" @success="trayScanningScuess"></tray-popup>
		<Add-Feed ref="addTrayRef" @success="addtrayScanningScuess"> </Add-Feed>
		
</view>
</template>

<script>
	import trayPopup from '../../components/popup/trayPopup.vue'
	import AddFeed from '../pop/add_feed.vue'
	import uniTransition from 'uni_modules/uni-transition/components/uni-transition/uni-transition.vue';
	import uniEmptyInfo from "../../vBase/components/uni-empty-info/uni-empty-info.vue"
	import {getProPlanDetailFeed,
	getTray,
	deleteFeedDetailTemp,
	saveFeedBill
	} from '@/utils/api.js'
	import GetTray from "../pop/get_tray.vue"

	export default {
		components: {
			GetTray,
			uniEmptyInfo,
			trayPopup,
			AddFeed
		},
		data(){
			return{
				billNo: '',
				loading: true,
				header:{},
				detail:[],
				trayData:{},
				inStockTime: this.getTodayDateTime(),
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#FF4E74'
					}
				}],	
			}
	},
	methods:{
		formatDateTime(date) {
			const y = date.getFullYear();
			const m = String(date.getMonth() + 1).padStart(2, '0');
			const d = String(date.getDate()).padStart(2, '0');
			const h = String(date.getHours()).padStart(2, '0');
			const min = String(date.getMinutes()).padStart(2, '0');
			const s = String(date.getSeconds()).padStart(2, '0');
			return `${y}-${m}-${d} ${h}:${min}:${s}`;
		},
		getTodayDateTime() {
			return this.formatDateTime(new Date());
		},
		onInStockTimeChange(val) {
			// 有些端返回时间戳或 ISO 格式，这里统一转成 yyyy-MM-dd HH:mm:ss
			if (typeof val === 'string') {
				this.inStockTime = val.length > 19 ? val.slice(0, 19).replace('T', ' ') : val
			} else {
				this.inStockTime = this.formatDateTime(new Date(val))
			}
		},
		addtrayScanningScuess(e){
			this.initData()
		},
		/**
		 * 删除物料
		 * @param {Object} e
		 */
		handleDelete(item) {
			const self = this
			uni.showModal({
				title: '提示',
				content: '是否删除物料？',
				success(res) {
					deleteFeedDetailTemp(item).then(res => {
						if (res.data.data){
							uni.showToast({
								title:'删除成功',
								icon:'none'
							})
						}
						self.initData()
						
					})
				}
			})
		},
		
		saveFeedBill(){
			let _this = this
			if (this.detail.length == 0 || this.detail == null){
				uni.showToast({
					title:'当前没有数据，请先扫描托盘',
					icon:'none'
				})
					return;
			}
		
			uni.showModal({
				title:'提示',
				content:'确认保存补料',
				success(res) {
					if (res.confirm){
						saveFeedBill({billNo :_this.header.billNo,
						moBillNo :_this.header.moBillNo ,
						detail : _this.detail,
						inStockTime: _this.inStockTime}).then(result => {
						if (result.data.data){
							uni.showToast({
								title:'补料成功',
								icon:'none'
							})
						}
						_this.initData()
						
						})
					
					}
				}
			})
		},
		//添加成功后返回
		getTraySuccess(e){
			this.initData()
		},
		//扫码成功后返回
		trayScanningScuess(e){
			let _this = this;
			getTray({billNo : e,moBillNo : this.header.moBillNo}).then(result => {
				if (result.statusCode == 200){
					this.trayData = result.data.data ?? {}
						let param = {
							title: '托盘信息',
							trayData: _this.trayData,
							header : _this.header,
							type : 'feed'
						}
						
						this.$refs.trayRef.open(param)
					
					
				}
			})
		},
		//扫码获取领料信息
		pickScan(){
			let _this = this;
			let param = {
				operNo :_this.header.billNo, 
			}
			this.$refs.addTrayRef.open(param)
		
		},
		// 获取详情数据
		initData(){
			getProPlanDetailFeed({billNo :this.billNo }).then(res => {
				if (res.statusCode == 200){
					this.header = res.data.data.data
					this.detail = res.data.data.dataList
					this.inStockTime = this.header.fdate || this.getTodayDateTime()
				} 
			})

		}
	},
	watch: {
		userInfo() {
			
			}
		},
		mounted() {

			this.initData()
			
		},
	onLoad(e){
		this.billNo = e.billNo
		
	}
}
</script>

<style lang="scss" scoped>
	@import "../../static/css/common";
/* 调整列表项左右文字大小 */
::v-deep .uni-list-item__content-title {
    font-size: 22px !important;  /* 左侧标题字体大小 */
	padding-left: 5px;
}
::v-deep .uni-list-item__extra-text {
    font-size: 22px !important;  /* 右侧内容字体大小 */
	padding-right: 5px;
	 color: #333;
}
/* 调整行间距 */
::v-deep .uni-list-item__container {
    padding: 3px 0 !important;   /* 减小上下内边距 */
    min-height: 10px !important; /* 减小最小高度 */
}
/* 新增日期样式 */
::v-deep .custom-date {
    font-size: 22px !important;  /* 与右侧文本相同大小 */
    color: #333 !important;      /* 与右侧文本相同颜色 */
    padding-right: 5px !important; /* 与右侧文本相同内边距 */
}
.panel {
  background: #fbffe2;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}
 
/* 调整标题样式 */
.panel_content_row_item_title {
    font-size: 17px !important;  /* 调大字体 */
    color: #000000 !important;   /* 纯黑字体 */
    flex-shrink: 0;             /* 防止压缩 */
}
/* 调整标题样式 */
.panel_content_row_item_value {
  flex: 1;
  font-size: 17px !important; /* 数值特别放大 */
  color: #333 !important;
}
/* 底部按钮 - 修改布局 */
	.footerPanel {
	  height: 60px;
	  .footerPanel_body {
	    display: flex;
	    justify-content: space-between; /* 左右分布按钮 */
	    width: 100%;
	    padding: 0 10px;
	    box-sizing: border-box;
	    
	    .footerBtn {
	      height: 70px;
	      min-width: 115px;
	      display: flex;
	      line-height: 1;
	      font-size: 22px; /* 适当增大字体 */
	      border-radius: 8px;
	      align-items: center;
	      justify-content: center;
	      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	      color: #fff;
	      border: none;
	      // margin: 0 10px;
	    }
	  }
	}
	.date-row {
	  display: flex;
	  align-items: center;
	
	}
	
	.date-label {
	  font-size: 18px;
	  width: 100px; /* 左侧固定宽度 */
	  color: #333;
	}
	
	.date-picker {
	  flex: 1; /* 占满剩余空间 */
	  font-size: 18px;
	  color: #333;
	}
</style>